<template>
  <van-overlay :show="isShow" @click="close" class="overlay-container" z-index="9999">
    <div class="wrapper" @click.stop>
      <div class="block">
        <p class="title-func">功能{{ gridIndex | formatBarLetter }}</p>
        <van-grid class="func-main">
          <van-grid-item v-for="(value,index) in funcIcon"
                         :key="index"
                         :icon="value"
                         :text="'功能'+(Number(index)+1)"
          />
        </van-grid>
      </div>
    </div>
  </van-overlay>
</template>

<script>
export default {
  name: 'OverLay',
  props: {
    isShow: {
      type: Boolean,
      required: true
    },
    gridIndex: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      funcIcon: ['like-o', 'location-o', 'star-o', 'bag-o', 'todo-list-o', 'shop-collect-o', 'smile-comment-o', 'star-o', 'bag-o', 'location-o']
    }
  },
  methods: {
    close () {
      // console.log('111')
      this.$emit('update:isShow', false)
    }
  }
}
</script>

<style lang="less" scoped>
.overlay-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #6f6f6f;

  .block {
    width: 350px;
    height: 390px;
    background-color: #f1f1f1;
    border-radius: 3%;

    .title-func {
      width: 100%;
      text-align: center;
      height: 50px;
      background-color: #272a3b;
      border-radius: 3%;
      color: #78bd00;
      line-height: 50px;
      font-size: 20px;
    }

    .func-main {
      ::v-deep(.van-grid-item__content) {
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: #f1f1f1;

        .van-icon {
          background-color: #78bd00;
          padding: 15px;
          border-radius: 40%;
          color: white;
        }
      }
    }
  }
}

</style>
